<template>
	<view class="content">
        <view class="prv-max">
            <view class="title">UME无限观影年卡</view>
            <view class="next">开通权益全年0元畅享600+院线电影  </view>
            <view class="right-text">切换影院品牌 </view>
            <iconArrow :point="1" :color="'#968A66'" />
            <view class="bottom-linebg">不限情侣厅、IMAX厅、4D厅、VIP厅  </view>
        </view>

    <view class="next-page">
       <view class="center-line-title">可享权益</view>
      <view class="max-list-box">
         <view class="user-next-box">
              <view class="item">
                <image class="tip-img" src="/static/equity/6.png" />
                <view class="name">0元观影 </view>
             </view>
              <view class="item">
                <image class="tip-img" src="/static/equity/7.png" />
                <view class="name">全年不限次数</view>
             </view>
              <view class="item">
                <image class="tip-img" src="/static/equity/8.png" />
                <view class="name">不限特色厅</view>
             </view>
         </view>
      </view> 
      <view class="max-list-box">
          <view class="user-next-box">
                <view class="item">
                  <image class="tip-img" src="/static/equity/9.png" />
                  <view class="name">同行底价购票</view>
              </view>
                <view class="item">
                  <image class="tip-img" src="/static/equity/10.png" />
                  <view class="name">全国通用 </view>
              </view>
                <view class="item">
                  <image class="tip-img" src="/static/equity/11.png" />
                  <view class="name">不限特色厅</view>
              </view>
          </view>
      </view>
       <view class="center-line-title-top">选择开通类型</view>
      <view class="max-list-box">
         <view class="next-box-border">
              <view class="item">
                <view class="border-box"></view>
             </view>
             <view class="item">
                <view class="border-box"></view>
             </view>
             <view class="item">
                <view class="border-box"></view>
             </view>
         </view>
      </view> 
    </view>
  </view>
</template>
<script>
import iconArrow from '../components/icon-arrow';

export default {
  components: {
		iconArrow
  },
  data() {
    return {
      msg: '',
    };
  },
  methods: {
    btnUrl(Url){
      	uni.redirectTo({ url: Url});
    }
  },
};
</script>
<style  lang="scss" scoped>
	.content {
		 -webkit-overflow-scrolling: touch;
		 background-color: #f5f5f5;
     position: relative;
     height: 100vh;
     padding-top: px2vw(10);
  }
.prv-max{
    width:px2vw(345);
    margin:0 auto;
    border-top-left-radius:px2vw(10);
    border-top-right-radius:px2vw(10);
    background-color:#E2D5B0;
    position: relative;
    .next,
    .title{
      font-size: px2vw($fz20);
      color: #968A66;
      padding:px2vw(30) 0 0 px2vw(15);
    }
    .next{
      font-size: px2vw($fz12);
      padding:px2vw(5) 0 0 px2vw(15);
    }
    .right-text{
        height: px2vw(30);
       line-height: px2vw(30);
       position: absolute;
       top: 50%;
       margin-top: - px2vw(15);
       color: #968A66;
       right: px2vw(25);
       font-size: px2vw($fz14);
       .right-box{
         position: relative;
       }
    }
    .bottom-linebg{
      background-color: #D6C38B;
      text-align: center;
       font-size: px2vw($fz12);
       color: #fff;
       height: px2vw(25);
       line-height: px2vw(25);
       margin-top: px2vw(20);
    }
  }
  .center-line-title-top,
  .center-line-title{
    text-align: center;
    color: #9B8F6D;
     font-size: px2vw($fz14);
  }
  .center-line-title-top{
    padding-top: px2vw(30);
  }
.next-page{
  background-color: #fff;
  padding-top:px2vw(30);
  .max-list-box{
    position: relative;
    width: 100vw;
    margin: 0  auto;
    background-color: #fff;
    padding: px2vw(20) 0 0 0;
    .next-box-border,
    .user-next-box{
      display: flex;
      .item{
        width: 33.3%;
        position: relative;
        padding: px2vw(10) 0 px2vw(10) 0;
        .tip-img{
          height: px2vw(40);
          width: px2vw(40);
          position: absolute;
          left: 50%;
          margin-left:- px2vw(15);
        }
        .name{
          font-size: px2vw($fz14);
          color: #000;
          padding-top: px2vw(60);
          text-align: center;
        }
      }
    }
    .next-box-border{
      .item .border-box{
        border: px2vw(1) solid #ddd;
        border-radius: px2vw(5);
        width: 90%;
        margin: 0 auto;
        height: px2vw(140);
      }
    }
  }
  }
</style>
